<script>
import { defineComponent } from 'vue';
let getCountStatus = () => { };
export default defineComponent({
  name: "SectionCenter",
  components: {
  },
  setup() {
  },
  data() {
    return {
      // 默认是模拟
      activeName: 'simulation',
      // 影响换热站
      count_1: 0,
      // 影响供热范围
      count_2: 0,
      // 影响供热户数
      count_3: 0,
      // 居民
      count_3_1: 0,
      // 非居民
      count_3_2: 0,
      // 影响供热面积
      count_4: 0,
      // 居民
      count_4_1: 0,
      // 非居民
      count_4_2: 0,
    }
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 30)
    getCountStatus = ({ count_1, count_2, count_3, count_3_1, count_3_2, count_4, count_4_1, count_4_2 }) => {
      if (count_1 !== undefined) {
        this.count_1 = Number(Number(count_1).toFixed(0));
      }

      if (count_2 !== undefined) {
        this.count_2 = Number(Number(count_2).toFixed(0));
      }

      if (count_3 !== undefined) {
        this.count_3 = Number(Number(count_3).toFixed(0));
      }
      if (count_3_1 !== undefined) {
        this.count_3_1 = Number(Number(count_3_1).toFixed(0));
      }
      if (count_3_2 !== undefined) {
        this.count_3_2 = Number(Number(count_3_2).toFixed(0));
      }

      if (count_4 !== undefined) {
        this.count_4 = Number(Number(count_4).toFixed(0));
      }
      if (count_4_1 !== undefined) {
        this.count_4_1 = Number(Number(count_4_1).toFixed(0));
      }
      if (count_4_2 !== undefined) {
        this.count_4_2 = Number(Number(count_4_2).toFixed(0));
      }

    }
    this.$MITT_BUS.on('get-count-status', getCountStatus)
    if (this.activeName === 'simulation') {
      this.doSimulationScene();
    }
    // this.$store.commit('SET_SLIDE_MODE', {
    //   mode: 'close'
    // })
  },
  unmounted() {
    this.$MITT_BUS.off('get-count-status', getCountStatus)
    getCountStatus = () => { }
    this.$store.commit('SET_SIMULATE_MODE', {
      tag: false
    })
    this.$MITT_BUS.emit('rerender-highlight-layer', {
      data: null,
      type: 'enterprise'
    })
    this.$MITT_BUS.emit('get-count-status', {
      count_1: 0,
      count_2: 0,
      count_3: 0,
      count_3_1: 0,
      count_3_2: 0,
      count_4: 0,
      count_4_1: 0,
      count_4_2: 0,
    })
    this.$store.commit('SET_SLIDE_MODE', {
      mode: ''
    })
  },
  watch: {
    activeName(nV, oV) {
      if (nV === 'simulation') {
        this.doSimulationScene();
        this.$store.commit('SET_SLIDE_MODE', {
          mode: 'close'
        })
      } else {
        this.$store.commit('SET_SLIDE_MODE', {
          mode: ''
        })
        this.$store.commit('SET_SIMULATE_MODE', {
          tag: false
        })
        this.$MITT_BUS.emit('rerender-highlight-layer', {
          data: null,
          type: 'enterprise'
        })
        this.$MITT_BUS.emit('get-count-status', {
          count_1: 0,
          count_2: 0,
          count_3: 0,
          count_3_1: 0,
          count_3_2: 0,
          count_4: 0,
          count_4_1: 0,
          count_4_2: 0,
        })
      }
    }
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      // this.$MITT_BUS.emit('rerender-highlight-layer', {
      //   data: null,
      //   type: 'enterprise'
      // })
    },
    switchTab(v) {
      if (this.activeName === v && v === 'simulation') {
        this.$MITT_BUS.emit('rerender-highlight-layer', {
          data: null,
          type: 'enterprise'
        })
        this.$MITT_BUS.emit('get-count-status', {
          count_1: 0,
          count_2: 0,
          count_3: 0,
          count_3_1: 0,
          count_3_2: 0,
          count_4: 0,
          count_4_1: 0,
          count_4_2: 0,
        })
      }
      this.activeName = v;
    },
    // 开始模拟
    doSimulationScene() {
      this.$store.commit('SET_SIMULATE_MODE', {
        tag: true
      })
      this.$store.commit('SET_SLIDE_MODE', {
        mode: 'close'
      })
      this.$message({
        offset: 300,
        duration: 3000,
        dangerouslyUseHTMLString: true,
        message: 
        '<span>开始故障模拟，请选择出现故障的<strong style="color: #f44336;"> 热源 </strong> 或者 <strong style="color: #f44336;"> 换热站 </strong></span>'
      })
    }
  }
});
</script>
<template>
  <div class="section-center">
    <div class="tabs">
      <div class="tab" @click="switchTab('simulation')" :class="[activeName === 'simulation' ? 'active' : '']">
        <span>故障模拟</span>
      </div>
      <div class="tab" @click="switchTab('alert')" :class="[activeName === 'alert' ? 'active' : '']">
        <span>投诉管理</span>
      </div>
    </div>

    <div class="counters font-AlibabaPuhui">
      <div class="counter single">
        <div class="item">
          <div class="title">影响换热站<span class="unit" v-if="count_1">(个)</span></div>
          <div class="number" v-loading="false" element-loading-background="rgba(0, 0, 0, 0.2)">
            <span>{{ count_1 }}</span>
          </div>
        </div>
      </div>
      <div class="counter single">
        <div class="item">
          <div class="title">影响供热范围<span class="unit" v-if="count_2">(个)</span></div>
          <div class="number" v-loading="false" element-loading-background="rgba(0, 0, 0, 0.2)">
            <span>{{ count_2 }}</span>
          </div>
        </div>
      </div>
      <div class="counter double">
        <div class="item hor">
          <div class="title">影响供热户数
            <span class="unit" v-if="count_3">(户)</span>
          </div>
          <div class="number" v-loading="false" element-loading-background="rgba(0, 0, 0, 0.2)">
            <span>{{ count_3 }}</span>
          </div>
        </div>
        <div class="item hor small-size">
          <div class="title">居民/非居民
            <span class="unit" v-if="count_3_1 || count_3_2">(户)</span>
          </div>
          <div class="number" v-loading="false" element-loading-background="rgba(0, 0, 0, 0.2)">
            <span>{{ count_3_1 }}</span>
            /
            <span>{{ count_3_2 }}</span>
          </div>
        </div>
      </div>
      <div class="counter double">
        <div class="item hor">
          <div class="title">影响供热面积
            <span class="unit" v-if="count_4">(m²)</span>
          </div>
          <div class="number" v-loading="false" element-loading-background="rgba(0, 0, 0, 0.2)">
            <span>{{ count_4 }}</span>
          </div>
        </div>
        <div class="item hor small-size">
          <div class="title">居民/非居民
            <span class="unit" v-if="count_4_1 || count_4_2">(m²)</span>
          </div>
          <div class="number" v-loading="false" element-loading-background="rgba(0, 0, 0, 0.2)">
            <span>{{ count_4_1 }}</span>
            /
            <span>{{ count_4_2 }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- Apple -->
  </div>
</template>
<style scoped lang="less">
.section-center {
  width: calc(100% - 100rem);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;

  &>.tabs {
    pointer-events: all;
    color: #fff;
    border: 1px solid #00bcd4;
    background-color: #133B7C;
    display: flex;
    font-size: 1rem;
    display: inline-flex;

    &>.tab {
      padding: .7rem 1rem;
      letter-spacing: .5rem;
      cursor: pointer;
      font-size: 2rem;
      font-family: "alimamashuheiti" !important;

      &.active,
      &:hover {
        background-image: linear-gradient(45deg, #0062BC 18%, #36B0FF 115%);
        ;
      }
    }

  }

  &>.counters {
    margin-top: 2rem;
    pointer-events: all;
    color: #fff;
    display: flex;
    justify-content: space-between;

    &>.counter {
      width: calc(25% - 1rem);

      &.single {
        width: calc(16.666% - 1rem);
      }

      &.double {
        width: calc(33.333% - 1rem);
      }

      border-radius: .5rem;
      border: 1px solid #00bcd4;
      background-image: linear-gradient(45deg, #0062BC 18%, #36B0FF 115%);

      &>.item {
        &.hor {
          display: flex;
          justify-content: space-around;

          &>.title,
          &>.number {
            width: 50%;
          }
        }

        &>.title {
          font-size: 1.8rem;
          line-height: 4rem;

          &>.unit {
            font-size: 1.5rem;
          }
        }


        &>.number {
          font-size: 2.5rem;
          font-weight: bolder;
          line-height: 4rem;

          &>span.small-size {
            font-size: 2rem;
          }
        }

        &.small-size {
          &>.title {
            font-size: 1.5rem;
            line-height: 3rem;

            &>.unit {
              font-size: 1.2rem;
            }
          }

          &>.number {
            font-size: 1.6rem;
            line-height: 3rem;
          }
        }
      }
    }
  }
}
</style>